<html><head><meta charset="utf-8"/><title>查找和过滤</title></head><body><h1>查找和过滤</h1><div class="x-wiki-content x-main-content">
 <p>
  通常情况下选择器可以直接定位到我们想要的元素，但是，当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。
 </p>
 <p>
  最常见的查找是在某个节点的所有子节点中查找，使用
  <code>
   find()
  </code>
  方法，它本身又接收一个任意的选择器。例如如下的HTML结构：
 </p>
 <ul class="lang">
  <li class="js dy">
   JavaScript
  </li>
  <li class="dy">
   Python
  </li>
  <li id="swift">
   Swift
  </li>
  <li class="dy">
   Scheme
  </li>
  <li name="haskell">
   Haskell
  </li>
 </ul>
 <pre><code>&lt;!-- HTML结构 --&gt;
&lt;ul class="lang"&gt;
    &lt;li class="js dy"&gt;JavaScript&lt;/li&gt;
    &lt;li class="dy"&gt;Python&lt;/li&gt;
    &lt;li id="swift"&gt;Swift&lt;/li&gt;
    &lt;li class="dy"&gt;Scheme&lt;/li&gt;
    &lt;li name="haskell"&gt;Haskell&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
 <p>
  用
  <code>
   find()
  </code>
  查找：
 </p>
 <pre><code>var ul = $('ul.lang'); // 获得&lt;ul&gt;
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell
</code></pre>
 <p>
  如果要从当前节点开始向上查找，使用
  <code>
   parent()
  </code>
  方法：
 </p>
 <pre><code>var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点&lt;ul&gt;
var a = swf.parent('.red'); // 获得Swift的上层节点&lt;ul&gt;，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象
</code></pre>
 <p>
  对于位于同一层级的节点，可以通过
  <code>
   next()
  </code>
  和
  <code>
   prev()
  </code>
  方法，例如：
 </p>
 <p>
  当我们已经拿到
  <code>
   Swift
  </code>
  节点后：
 </p>
 <pre><code>var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swift.prev(); // Python
swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy
</code></pre>
 <h3>
  过滤
 </h3>
 <p>
  和函数式编程的map、filter类似，jQuery对象也有类似的方法。
 </p>
 <p>
  <code>
   filter()
  </code>
  方法可以过滤掉不符合选择器条件的节点：
 </p>
 <pre><code>var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
</code></pre>
 <p>
  或者传入一个函数，要特别注意函数内部的
  <code>
   this
  </code>
  被绑定为DOM对象，不是jQuery对象：
 </p>
 <pre><code>var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
</code></pre>
 <p>
  <code>
   map()
  </code>
  方法把一个jQuery对象包含的若干DOM节点转化为其他对象：
 </p>
 <pre><code>var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
</code></pre>
 <p>
  此外，一个jQuery对象如果包含了不止一个DOM节点，
  <code>
   first()
  </code>
  、
  <code>
   last()
  </code>
  和
  <code>
   slice()
  </code>
  方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉：
 </p>
 <pre><code>var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
</code></pre>
 <h3>
  练习
 </h3>
 <p>
  对于下面的表单：
 </p>
 <pre><code>&lt;form id="test-form" action="#0" onsubmit="return false;"&gt;
    &lt;p&gt;&lt;label&gt;Name: &lt;input name="name"&gt;&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;&lt;label&gt;Email: &lt;input name="email"&gt;&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;&lt;label&gt;Password: &lt;input name="password" type="password"&gt;&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;Gender: &lt;label&gt;&lt;input name="gender" type="radio" value="m" checked&gt; Male&lt;/label&gt; &lt;label&gt;&lt;input name="gender" type="radio" value="f"&gt; Female&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;&lt;label&gt;City: &lt;select name="city"&gt;
    	&lt;option value="BJ" selected&gt;Beijing&lt;/option&gt;
    	&lt;option value="SH"&gt;Shanghai&lt;/option&gt;
    	&lt;option value="CD"&gt;Chengdu&lt;/option&gt;
    	&lt;option value="XM"&gt;Xiamen&lt;/option&gt;
    &lt;/select&gt;&lt;/label&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type="submit"&gt;Submit&lt;/button&gt;&lt;/p&gt;
&lt;/form&gt;
</code></pre>
 <p>
  输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：
  <code>
   {"name":"Michael","email":...}
  </code>
 </p>
 <pre><code class="language-x-javascript">'use strict';
var json = null;
----
json = ???;
----
// 显示结果:
if (typeof(json) === 'string') {
    console.log(json);
}
else {
    console.log('json变量不是string!');
}
</code></pre>
 <form action="#0" id="test-form" onsubmit="return false;">
  <p>
   <label>
    Name:
    <input name="name"/>
   </label>
  </p>
  <p>
   <label>
    Email:
    <input name="email"/>
   </label>
  </p>
  <p>
   <label>
    Password:
    <input name="password" type="password"/>
   </label>
  </p>
  <p>
   Gender:
   <label>
    <input checked="" name="gender" type="radio" value="m"/>
    Male
   </label>
   <label>
    <input name="gender" type="radio" value="f"/>
    Female
   </label>
  </p>
  <p>
   <label>
    City:
    <select name="city">
     <option selected="" value="BJ">
      Beijing
     </option>
     <option value="SH">
      Shanghai
     </option>
     <option value="CD">
      Chengdu
     </option>
     <option value="XM">
      Xiamen
     </option>
    </select>
   </label>
  </p>
  <p>
   <button type="submit">
    Submit
   </button>
  </p>
 </form>
</div>
</body></html>